import React, { useState, useEffect } from 'react'
import { toggleForbidScrollThrough } from '../utils/util'
import { useMobileMode } from '../utils/customHooks'
import './style/iosFixed.scss'

function IosFixed() {
    useMobileMode()
    const [showMoreIdx, setShowMoreIdx] = useState(-1)
    const data = new Array(6).fill(
        {img:'http://e-art.top/img/kite_black.png',name:''},
        // { img: 'http://data.haier.net/oss/M00/02/AA/Csd_l1-dFqaABGiXAAHudwd9MIM352.jpg', name: '' }
    )

    useEffect(() => {
        // 此页面使用如下方法，会因为body的position:fixed定位导致在iPhone上出现第三个删除按钮在屏幕下半截时被堵在mask层底下。
        console.log({ showMoreIdx })
        toggleForbidScrollThrough(showMoreIdx >= 0)
    }, [showMoreIdx])

    return (
        <div className={'p-iosFixed'}>
            <h2 className={'my-16'}>IOS上fixed的奇怪现象</h2>
            <ul className={'mb-16'}>
                在IOS手机上
                <li>点击第三个图片右下角的更多，如果在靠近屏幕上方的部位则弹出的删除按钮正常，如果靠近屏幕下方，则弹出的按钮会被遮到mask下面。</li>
                <li>只有第三个按钮是这样，第一二个按钮完全正常，第4个往后的按钮都不正常</li>
                <li>同样有问题的还有更多的三个点。</li>
                <li>导致此问题的一个直接原因是固定背景时给body加了fixed的定位，但为什么导致这个错乱目前不清楚</li>
                <li>一个解决方案是，不要使用toggleForbidScrollThrough方法来固定背景，但只能用于弹出的内容不需要滑动的场景。</li>
            </ul>
            {data.map((item, idx) =>
                <li className='mb-8' key={idx}>
                    <div className={'img bgCover border'} style={{ backgroundImage: `url(${item.img})` }} />
                    {<div className={'content'}>
                        <span className={'more'} onClick={() => setShowMoreIdx(idx)}>
                            <i className={'iconfont i-more' + (showMoreIdx === idx ? ' reverse' : '')} />
                        </span>
                        {showMoreIdx === idx && <>
                            <div className={'mask'} onClick={() => setShowMoreIdx(-1)} />
                            <button className={'delBtn'} onClick={() => setShowMoreIdx(-1)} >删除</button>
                        </>}
                    </div>}
                </li>
            )}
        </div>
    )
}

export default IosFixed
